<template>
  <div class="bodyall">
    <div>
      <h1 style="margin-left: 100px; padding-top: 20px">购物车</h1>
      <h5 style="display: flex; width: 100px; justify-content: space-between">
        <div @click="btnOrder">订单</div>
        <div @click="btnhome">首页</div>
      </h5>
    </div>
    <div class="Select">
      <!-- 头部 -->
      <div class="Selectall">
        <div class="selesttest">
          <div @click="btncheck()">
            <img v-if="!ischecked" src="../assets/未选中.png" />
            <img v-if="ischecked" src="../assets/选中.png" />
          </div>
          <div>全选</div>
          <div>商品</div>
          <div>单价</div>
          <div>数量</div>
          <div>小计</div>
          <div>操作</div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="items" v-for="(item, index) in items" :key="index">
        <div class="item">
          <div @click="checkeditem(item)">
            <img v-if="item.ischeckeditem" src="../assets/选中.png" />
            <img v-else src="../assets/未选中.png" />
          </div>
          <div>
            <img class="itemimg" :src="item.picture" />
          </div>
          <div>{{ item.Commodityname }}</div>
          <div>￥{{ item.Price - 0 }}</div>
          <div>
            <button @click="item.number--">-</button
            ><button>{{ item.number }}</button
            ><button @click="item.number++">+</button>
          </div>
          <div>￥{{ (item.Price - 0) * item.number }}</div>
          <div @click="deleteitem(index)">删除</div>
        </div>
      </div>
      <!-- 结算 -->
      <div class="settlements">
        <div class="settlement">
          <div></div>
          <div></div>
          <div>
            <div>已选</div>
            <div>{{ quantitynumber }}件</div>
            <div>商品</div>
            <div>合计:￥{{ Totalnumber }}</div>
          </div>
          <div>
            <button @click="ToOrder">支付</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { onBeforeMount, onUnmounted, ref, watch } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    // 全选框状态
    const ischecked = ref(true);
    // 存放商品
    const items = ref("");
    // 商品总数
    const quantitynumber = ref(0);
    // 商品总价
    const Totalnumber = ref("");
    // 顶部全选框
    const btncheck = () => {
      ischecked.value = !ischecked.value;
      if (ischecked.value == true) {
        items.value.forEach((s) => {
          s.ischeckeditem = true;
        });
      } else {
        items.value.forEach((s) => {
          s.ischeckeditem = false;
        });
      }
    };
    // 单条切换
    const checkeditem = (xixi) => {
      xixi.ischeckeditem = !xixi.ischeckeditem;
      if (xixi.ischeckeditem == false) {
        ischecked.value = false;
      }
    };
    // 反选,总件，总价
    watch(
      () => items.value,
      () => {
        let num = items.value.filter((p) => {
          return p.ischeckeditem;
        });
        if (num.length == items.value.length) {
          ischecked.value = true;
        } else {
          ischecked.value = false;
        }
        let xixi = 0;
        let haha = 0;
        items.value.forEach((s) => {
          if (s.ischeckeditem == true) {
            xixi += s.number;
            haha += s.number * (s.Price - 0);
          }
          if (s.number < 0) {
            s.number = 0;
          }
        });
        quantitynumber.value = xixi;
        Totalnumber.value = haha;
      },
      { deep: true }
    );
    // 获取当前时间方法
      const statetime = ref("");
      const getTime = async () => {
        var myDate = new Date();
        let month = (myDate.getMonth() + 1).toString().padStart(2, "0");
        let day = myDate.getDate().toString().padStart(2, "0");
        let hour = myDate.getHours().toString().padStart(2, "0");
        let minutes = myDate.getMinutes().toString().padStart(2, "0");
        let seconed = myDate.getSeconds().toString().padStart(2, "0");
        statetime.value =
          myDate.getFullYear() +
          "年" +
          month +
          "月" +
          day +
          "日" +
          hour +
          ":" +
          minutes +
          ":" +
          seconed;
        return statetime.value;
      };
    // 跳转到首页
    const btnhome = () => {
      router.push("/");
    };
    const btnOrder = () => {
      router.push("/Order");
    };
    // 删除单条
    const deleteitem = (xixi) => {
      items.value.splice(xixi, 1);
    };
    // 拿到store数据
    onBeforeMount(() => {
      store.Mycart;
      items.value = store.state.Mycart.xixi;
    });
    // 支付
    const cratitems = ref([]);
    let ToOrder = () => {
      items.value.forEach((a,b) => {
        if (a.ischeckeditem == true) {
          // 给商品加上下单时间
          getTime().then((res)=>{
            a.time=res
          })
          cratitems.value.push(a);
          items.value.splice(b,1)
        }
      });
      store.commit("addCart", cratitems.value);
      console.log(cratitems.value,"cratitems.value");
      alert('支付成功')
      router.push('/Order')
    };
    // 页面销毁前把数据存在 
    onUnmounted(()=>{
      console.log('组件被销毁啦');
    })
    return {
      ischecked,
      items,
      quantitynumber,
      Totalnumber,
      cratitems,
      statetime,
      btnhome,
      btncheck,
      btnOrder,
      deleteitem,
      checkeditem,
      ToOrder,
      getTime
    };
  },
};
</script>

<style scoped>
.bodyall {
  background: rgb(233, 232, 232);
  height: 100%;
}
.Select {
  margin-top: 40px;
  width: 80%;
  margin-left: 10%;
}
.bodyall > :nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bodyall > :nth-child(1) > :nth-child(2) {
  margin-right: 10%;
  cursor: pointer;
}
/* 结算 */
.settlements {
  background: white;
  height: 75px;
  margin-top: 20px;
}
.settlement {
  line-height: 75px;
  display: flex;
}
.settlement > :nth-child(1) {
  margin-left: 20px;
  cursor: pointer;
}
.settlement > :nth-child(2) {
  margin-left: 5px;
  cursor: pointer;
}
.settlement > :nth-child(3) {
  display: flex;
  margin-left: 52%;
  cursor: pointer;
}
.settlement > :nth-child(4) {
  margin-left: 5%;
}
.settlement > :nth-child(3) > :nth-child(2),
.settlement > :nth-child(3) > :nth-child(4) {
  color: red;
}
.settlement > :nth-child(4) > button {
  width: 160px;
  height: 50px;
  background: #333333;
  color: white;
  border: none;
  font-size: 21pt;
  font-weight: 100;
  line-height: 100%;
  text-align: center;
  border-radius: 14px;
  cursor: pointer;
}

/* 头部 */
.Selectall {
  background: white;
  height: 55px;
}
.selesttest {
  line-height: 55px;
  display: flex;
}
.selesttest > :nth-child(1) {
  margin-left: 10px;
  cursor: pointer;
}
.selesttest > :nth-child(2) {
  margin-left: 5px;
  cursor: pointer;
}
.selesttest > :nth-child(3) {
  width: 40%;
  text-align: center;
  cursor: pointer;
}
.selesttest > :nth-child(4) {
  width: 10%;
  cursor: pointer;
}
.selesttest > :nth-child(5) {
  width: 10%;
  cursor: pointer;
}
.selesttest > :nth-child(6) {
  width: 15%;
  cursor: pointer;
}
.selesttest > :nth-child(7) {
  width: 15%;
  text-align: center;
  cursor: pointer;
}
/* 列表 */
.items {
  margin-top: 20px;
  background: white;
  height: 180px;
}
.item {
  line-height: 180px;
  display: flex;
}
.itemimg {
  margin-top: 14%;
  width: 110px;
  height: 110px;
}
.item > :nth-child(1) {
  margin-left: 10px;
  cursor: pointer;
}
.item > :nth-child(2) {
  width: 25%;
  text-align: end;
}
.item > :nth-child(3) {
  width: 15%;
}
.item > :nth-child(4) {
  width: 10%;
  text-align: center;
}
.item > :nth-child(5) {
  width: 10%;
}
.item > :nth-child(6) {
  width: 15%;
  margin-left: 15px;
}
.item > :nth-child(7) {
  margin-left: 15px;
  width: 15%;
  text-align: center;
  cursor: pointer;
}
.item > :nth-child(5) > button {
  width: 30px;
  height: 20px;
  cursor: pointer;
  background: white;
  border: 0.25px rgb(180, 178, 178) solid;
}
</style>